import React,{Component} from 'react'
import {connect} from 'react-redux';
import {WritingTop,WritingContent,WritingBottom,WritingItem} from '../style'
class Writing extends Component{
    constructor(){
        super();
    }
    render(){
        return(
            <React.Fragment>
              <WritingTop>
                  <span className='left'>作者推荐</span>
                  <span className='right'><i className="iconfont">&#xe794;</i>换一批</span>
              </WritingTop>
              <WritingContent>
                  {
                      this.props.writingList.map((item,index)=>{
                          return(
                            <WritingItem key={index}>
                            <img className='writing-img' src={item.get('src')}></img>
                            <div className='writing-content-center'>
                                <p className='title'>{item.get('title')}</p>
                                <p className='content'>{item.get('content')}</p>
                            </div>
                            <span className='writing-content-right'>关注+</span>
                            </WritingItem>
                          )
                      })
                  }
              </WritingContent>
              <WritingBottom>
                  <a href='' className='load-more'>加载更多></a>
              </WritingBottom>
            </React.Fragment>
        )
     }
}
const mapStateToProps = (state)=>{
    return{
        writingList:state.get('home').get('writingList'),
    }
}
export default connect(mapStateToProps,null)(Writing);